<template>
    <div class="amount">
        <echarts :data="optionData" :height="eheight"></echarts>
    </div>
</template>

<script>
import Echarts from '@components/my-components/echarts.vue';

export default {
    mixins: [],
    components: {
        Echarts,
    },
    props: {
        options: {
            type: Object,
            default: () => {},
        },
        //高度
        eheight: {
            type: String,
            default: '300px',
        },
        // 单位类型
        unitType: {
            type: String,
            default: 'amout', // amout-金额 num-数量
        },
        //是否显示下方滑块
        isSlide: {
            type: Boolean,
            default: false,
        },
        //是否 缩放
        isZoom: {
            type: Boolean,
            default: false,
        },
        //底边距离
        botGrid:{
            type: String,
            default: '',
        },
    },
    data() {
        return {};
    },
    computed: {
        optionData() {
            const colors = ['#3b68ff', '#2ec75a', '#ff8f00', '#ff5454', '#65B581', '#FFCE34', '#FD665F'];
            let option = {
                color: colors,
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    //四周距离
                    left: '12%',
                    right: '4%',
                },
                toolbox: {},
                // 可以通过点击图例控制哪些系列不显示。
                legend: {
                    data: this.options.label,
                },

                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true,
                        },
                        // prettier-ignore
                        data: this.options.xData,
                        axisLabel: {
                            //轴上的字 字体、样式inside: false,
                            textStyle: {
                                fontSize: '10',
                                itemSize: '',
                            },
                            interval: 0, //使x轴上的文字显示完全,
                            formatter: function (params) {
                                var newParamsName = '';
                                var paramsNameNumber = params.length;
                                var provideNumber = 4;
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                                if (paramsNameNumber > provideNumber) {
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = '';
                                        var start = p * provideNumber;
                                        var end = start + provideNumber;
                                        if (p == rowNumber - 1) {
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            tempStr = params.substring(start, end) + '\n';
                                        }
                                        newParamsName += tempStr;
                                    }
                                } else {
                                    newParamsName = params;
                                }
                                return newParamsName;
                            },
                        },
                    },
                ],
                dataZoom: [],
                yAxis: [
                    {
                        type: 'value',
                        name: '项目金额（万元）',
                        position: 'left',
                        alignTicks: true,
                        padding: [0, 10, 0, 0], // 右边内边距10
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: colors[0],
                            },
                        },
                        axisLabel: {
                            formatter: '{value}',
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dotted',
                            },
                        },
                        axisTick: {
                            show: false, // 不显示坐标轴刻度线
                        },
                    },
                ],
                //
                series: [
                    {
                        type: 'bar', //类型，
                        barWidth: 8, //宽度
                        barMinHeight: 4,
                        data: this.options.seriesValue,
                        color: colors[0],
                    },
                ],
            };

            //数据
            if (this.options.seriesValue) {
                let newSeries = [];

                if (this.options.isYear == true) {
                    // if (option) {
                    //     option.series = [
                    //         {
                    //             type: 'bar', //类型，
                    //             barWidth: 8, //宽度
                    //             barMinHeight: 4,
                    //             data: this.options.seriesValue,
                    //             color: colors[0],
                    //         },
                    //     ];
                    // }
                    // return;
                } else {
                    this.options.seriesValue.forEach((item, i) => {
                        newSeries[i] = {
                            name: item.name,
                            type: 'bar', //类型，
                            barWidth: 8, //宽度
                            barMinHeight: 4,
                            data: item.data,
                            color: colors[i],
                        };

                        option.series = newSeries;

                        if (this.unitType === 'amout') {
                            if (option.series[i].data) {
                                option.series[i].data.forEach((item2, i2) => {
                                    option.series[i].data[i2] = Math.floor(item2) / 10000;
                                });
                            }
                        }
                    });
                }
            }


            // 坐标轴
            if (this.unitType === 'amout') {
                option.yAxis[0].name = '项目金额（万元）';
            } else {
                option.yAxis[0].name = '项目数量（个）';
            }

            // 缩放
            if (this.isZoom) {
                option.dataZoom[0] = {
                    type: 'inside', //放大缩小x轴数值,无滑动条内置缩放   type: 'slider', //缩放滑动条
                    show: true, //开启
                    // yAxisIndex: [0], //Y轴滑动
                    xAxisIndex: [0], //X轴滑动
                    start: 1, //初始化时，滑动条宽度开始标度
                    end: 40, //初始化时，滑动条宽度结束标度
                };
            }
            //下方滑块
            if (this.isSlide || (this.options.xData && this.options.xData.length > 12)) {
                option.dataZoom[1] = {
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    handleSize: 0, //滑动条的 左右2个滑动条的大小
                    height: 5, //组件高度
                    left: '10%', //左边的距离
                    right: '10%', //右边的距离
                    bottom: 15, //底边的距离
                    borderColor: '#ccc',
                    fillerColor: '#4cccfe',
                    borderRadius: 5,
                    backgroundColor: '#efefef', //两边未选中的滑动条区域的颜色
                    showDataShadow: false, //是否显示数据阴影 默认auto
                    showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                    realtime: true, //是否实时更新
                };
            }

            //提示
            var that = this; // formatter 中  直接打印this 提示 undefined，this 重定向
            option.tooltip.formatter = function (params) {
                let str = params[0].axisValue + '<br />';
                params.forEach((item) => {
                    str +=
                        '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
                        item.color +
                        '"></span>' +
                        ' ' +
                        item.seriesName +
                        ' : ' +
                        (item.value - 0).toLocaleString() +
                        (that.unitType == 'amout' ? ' 万元 ' : ' 个 ') +
                        '<br />';
                });
                return str;
            };

            //  botgrid
            if(this.botGrid.length !== 0){
                option.grid.bottom = this.botGrid;
            }
            if (this.unitType === 'amout') {
                option.grid.left = '14%';
            } else {
                option.grid.left = '12%';
            }

            return option;
        },
    },
    watch: {},
    methods: {
        int() {},
    },
    mounted() {
        this.int();
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.amount {
}
</style>